<template>
<h1>计算器练习</h1>
  <input type="text" v-model="num1" placeholder="请输入数字">
  <input type="text" v-model="num2" placeholder="请输入数字">
  <button @click="f('+')">加</button>
  <button @click="f('-')">减</button>
  <button @click="f('*')">乘</button>
  <button @click="f('/')">除</button>
  <h3>运算结果：{{result}}</h3>
</template>
<script setup>
import {ref} from "vue";

const num1 = ref('');
const num2 = ref('');
const result = ref('')
const f = (o)=>{
  /*响应式变量在js中使用，须.value*/
  console.log(typeof num2.value);
  if(o==='/'&&num2.value==='0'){
    alert('除数不能为0');
    return;
  }
  /*eval:会将字符串形式的算式自动进行js计算*/
  result.value=eval(num1.value+o+num2.value);
}
</script>


<style scoped>

</style>